<template>
    <div>
        <TopNav title="栏目管理" />
        <h2>点击删除以下频道</h2>
        <div class="activeList">
            <div 
                class="item"
                v-for="(category, index) in activeList"
                :key="category.id"
                @click="deactive(index)"
            >
                {{category.name}}
            </div>
        </div>
        <h2>点击添加以下频道</h2>
        <div class="deactiveList">
            <div 
                class="item"
                v-for="(category, index) in deactiveList"
                :key="category.id"
                @click="active(index)"
            >
                {{category.name}}
            </div>
        </div>
    </div>
</template>

<script>
    import TopNav from "../../components/TopNav";
    export default {
        data() {
            return {
                activeList: [],
                deactiveList: []
            }
        },
        watch: {
            activeList() {
                localStorage.setItem('active', JSON.stringify(this.activeList))
            },
            deactiveList() {
                localStorage.setItem('deactive', JSON.stringify(this.deactiveList))
            }
        },
        components: {
            TopNav,
        },
        created() {
            if (localStorage.getItem('active')) {
                this.activeList = JSON.parse(localStorage.getItem('active'))
                if (localStorage.getItem('deactive')) {
                    this.deactiveList = JSON.parse(localStorage.getItem('deactive'))
                }
            } else {
                // 默认情况下是直接从远程拿数据,
                // 但是如果本地已经有储存了
                // 应该使用本地数据而不是远程响应
                this.$axios({
                    url: "/category"
                }).then(res=>{
                    this.activeList = res.data.data
                    console.log(this.activeList);
                })
            }
            
        },
        methods: {
            deactive(index) {
                if (this.activeList.length == 1) {
                    this.$toast('最少要有一个激活栏目')
                    return
                }
                // 将点击的已激活项目移动到禁用数组中
                // 2. 放入新数组(先push再删, 不然旧数据就丢失)
                this.deactiveList.push(this.activeList[index])
                // 1. 原来的地方删掉
                this.activeList.splice(index, 1)
            },
            active(index) {
                this.activeList.push(this.deactiveList[index])
                this.deactiveList.splice(index, 1)
            }
        }
    };
</script>

<style lang="less" scoped>
    h2 {
        font-size: 14/360 * 100vw;
        font-weight: 400;
        color: #666;
        padding: 0 10/360 * 100vw;
    }
    .activeList,
    .deactiveList {
        padding: 10/360 * 100vw;
        font-size: 18/360 * 100vw;
        display: flex;
        flex-wrap: wrap;
        .item {
            border: 1px solid #888;
            padding: 6/360*100vw 13/360*100vw;
            margin: 10/360*100vw;
        }
    }
</style>